<!doctype html>
<html lang="ch">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>会员主页</title>

    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script>
        $(function() {
            $(".meun-item").click(function() {
                $(".meun-item").removeClass("meun-item-active");
                $(this).addClass("meun-item-active");
                var itmeObj = $(".meun-item").find("img");
                itmeObj.each(function() {
                    var items = $(this).attr("src");
                    items = items.replace("{{ url_for('static', filename='images/_grey.png') }}", ".png");

                    $(this).attr("src", items);
                });
                var attrObj = $(this).find("img").attr("src");
                ;
                attrObj = attrObj.replace("{{ url_for('static', filename='images/_grey.png') }}", ".png");
                $(this).find("img").attr("src", attrObj);
            });
            $("#topAD").click(function() {
                $("#topA").toggleClass(" glyphicon-triangle-right");
                $("#topA").toggleClass(" glyphicon-triangle-bottom");
            });
            $("#topBD").click(function() {
                $("#topB").toggleClass(" glyphicon-triangle-right");
                $("#topB").toggleClass(" glyphicon-triangle-bottom");
            });
            $("#topCD").click(function() {
                $("#topC").toggleClass(" glyphicon-triangle-right");
                $("#topC").toggleClass(" glyphicon-triangle-bottom");
            });
            $(".toggle-btn").click(function() {
                $("#leftMeun").toggleClass("show");
                $("#rightContent").toggleClass("pd0px");
            })
        })
    </script>

    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/common.css')}}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/slide.css')}} "/>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css')}}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/flat-ui.min.css')}}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/jquery.nouislider.css')}}"/>
</head>

<body>
    <div id="wrap">
        <!-- 左侧菜单栏目块 -->
        <div class="leftMeun" id="leftMeun">
            <div id="logoDiv">
                <p id="logoP"><img id="logo" alt="左右结构项目" src="{{ url_for('static', filename='images/userlogo.png') }}">会员页面</p>
            </div>
            <div class="meun-title">个人信息</div>
            <div class="meun-item" href="#user" aria-controls="user" role="tab" data-toggle="tab"><img src="{{ url_for('static', filename='images/icon_card_grey.png') }}">会员卡信息</div>
            <div class="meun-item" href="#sitt" aria-controls="sitt" role="tab" data-toggle="tab"><img src="{{ url_for('static', filename='images/icon_char_grey.png') }}">历史开房账单查询</div>
            <div class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab"><img src="{{ url_for('static', filename='images/icon_change_grey.png') }}">修改密码</div>
            <div class="meun-title">零食</div>
            <div class="meun-item" href="#regu" aria-controls="regu" role="tab" data-toggle="tab"><img src="{{ url_for('static', filename='images/icon_chara_grey.png') }}">零食订单提交</div>
        </div>
        <!-- 右侧具体内容栏目 -->
        <div id="rightContent">
            <a class="toggle-btn" id="nimei">
                <i class="glyphicon glyphicon-align-justify"></i>
            </a>
            <!-- Tab panes -->
            <div class="tab-content">
                <!--卡管理模块-->
                <div role="tabpanel" class="tab-pane" id="user">
                    <div class="check-div form-inline">
                        <div class="col-xs-3">
                            <a href="#"><button class="btn btn-yellow btn-xs" >个人信息 </button> </a>
                        </div>
                    </div>
                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-xs-2 ">
                                卡号
                            </div>
                            <div class="col-xs-2">
                                姓名
                            </div>
                            <div class="col-xs-2">
                                使用状态
                            </div>
                            <div class="col-xs-2">
                                结算状态
                            </div>
                            <div class="col-xs-1">
                                余额
                            </div>
                        </div>
                        <div class="tablebody">
                            {% for person in member %}
                                <div class="row" >

                                        <div class="col-xs-2 ">
                                            {{person.a}}
                                        </div>
                                        <div class="col-xs-2">
                                            {{person.b}}
                                        </div>
                                        <div class="col-xs-2">
                                            {{person.c}}
                                        </div>
                                        <div class="col-xs-2">
                                            {{person.d}}
                                        </div>
                                        <div class="col-xs-2">
                                            {{person.e}}
                                        </div>

                                </div>
                            {% endfor %}
                        </div>
                    </div>

                </div>
                <!--个人开房账单管理模块-->
                <div role="tabpanel" class="tab-pane" id="sitt">

                    <div class="check-div form-inline" style="">
                        <div class="col-xs-3">
                            <a href="#"><button class="btn btn-yellow btn-xs" >往期个人账单 </button> </a>
                        </div>
                    </div>
                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-xs-1" align="center">
                                账单编号
                            </div>
                            <div class="col-xs-3" align="center">
                                开始时间
                            </div>
                            <div class="col-xs-3" align="center">
                                结束时间
                            </div>
                            <div class="col-xs-1">
                                总价格
                            </div>

{#                            <div class="col-xs-1" align="center">#}
{#                                开房卡号#}
{#                            </div>#}

                            <div class="col-xs-2" align="center">
                                包房编号
                            </div>
                            <div class="col-xs-1">
                                处理人员编号
                            </div>
                        </div>
                        <div class="tablebody">
                         {% for bill in bills %}
                                <div class="row" >
                                        <div class="col-xs-1" align="center">
                                            {{bill.a}}
                                        </div>
                                        <div class="col-xs-3" align="center">
                                            {{bill.b}}
                                        </div>
                                        <div class="col-xs-3" align="center">
                                            {{bill.c}}
                                        </div>
                                        <div class="col-xs-1">
                                            {{bill.d}}
                                        </div>

{#                                        <div class="col-xs-1"align="center">#}
{#                                            {{bill.e}}#}
{#                                        </div>#}

                                        <div class="col-xs-2" align="center">
                                            {{bill.f}}
                                        </div>
                                        <div class="col-xs-1">
                                            {{bill.g}}
                                        </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                </div>
                <!-- 修改密码模块 -->
                <div role="tabpanel" class="tab-pane" id="chan">
                    <div class="check-div">
                        原始密码为123456
                    </div>
                    <div style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
                        <form class="form-horizontal" action="{{ url_for('changeuspwd') }}" method="post">
                            <div class="form-group">
                                <label for="sKnot" class="col-xs-4 control-label">卡号：</label>
                                <div class="col-xs-5">
                                    <input type="text" class="form-control input-sm duiqi" name="Card_ID" placeholder="Staff ID" style="margin-top: 7px;">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="sKnot" class="col-xs-4 control-label">原密码：</label>
                                <div class="col-xs-5">
                                    <input type="password" class="form-control input-sm duiqi" name="Old_Pwd" placeholder="Old Password" style="margin-top: 7px;">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="sKnot" class="col-xs-4 control-label">新密码：</label>
                                <div class="col-xs-5">
                                    <input type="password" class="form-control input-sm duiqi" name="New_Pwd" placeholder="New Password" style="margin-top: 7px;">
                                </div>
                            </div>
                            <div class="form-group text-right">
                                <div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
                                    <button type="reset" class="btn btn-xs btn-white">取 消</button>
                                    <button type="submit" class="btn btn-xs btn-green">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
                <!--零食管理模块-->
                <div role="tabpanel" class="tab-pane" id="regu">
                    <div class="data-div">
                        <div class="check-div form-inline">

                        <div class="col-xs-3">
                            <a href="#"><button class="btn btn-yellow btn-xs" >下订单页面 </button> </a>
                        </div>
                    </div>
                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-xs-2" align="center">
                                零食编号
                            </div>
                            <div class="col-xs-3" align="center">
                                零食名称
                            </div>
                            <div class="col-xs-1" align="center">
                                零食价格
                            </div>
                            <div class="col-xs-2" align="center">
                                零食数量
                            </div>
                            <div class="col-xs-1" align="center">
                                用户卡号
                            </div>
                        </div>
                        <div class="tablebody">
                             {% for snack in snacks %}
                                <div class="row" >
                                <form method="post" action="{{ url_for('addorder') }}">
                                        <div class="col-xs-2" align="center">
                                            <input style="text-align:center;height:30px;width: 40px;" name ="Snack_ID" type="text" readonly="readonly" value="{{snack.a}}">
                                        </div>
                                        <div class="col-xs-3" align="center">
                                            {{ snack.b }}
                                        </div>
                                        <div class="col-xs-1" align="center">
                                            {{ snack.c }}
                                        </div>
                                        <div class="col-xs-2" align="center">
                                            <input style="text-align:center;height:30px;width: 80px;" name ="Quantity" type="number" min="0">
                                        </div>
                                        <div class="col-xs-1" align="center">
                                            <input style="text-align:center;height:30px;width: 100px;" name ="Card_ID" type="text" readonly="readonly" value="{{username}}">
                                        </div>
                                        <div class="col-xs-2">
                                            <button type="submit" class="btn btn-success btn-xs">提交</button>
                                        </div>
                                </form>
                                </div>
                            {% endfor %}
                        </div>

                    </div>
                    <!--页码块-->
                    <footer class="footer">
                        <ul class="pagination">
                            <li>
                                <select>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                    <option>7</option>
                                    <option>8</option>
                                    <option>9</option>
                                    <option>10</option>
                                </select>
                                页
                            </li>
                            <li class="gray">
                                共20页
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-menu-left">
                                </i>
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-menu-right">
                                </i>
                            </li>
                        </ul>
                    </footer>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>